<script>
import { reactive, toRefs } from "vue";
import { useRouter,useRoute} from "vue-router";
import { setSessionStorage } from "../common.js";
import axios from "axios";
export default {
  setup() {
    const router = useRouter();
    const route =useRoute()

    const state = reactive({
      doctor: {
        docCode: "",
        password: "",
      },
    });

    const login = () => {
      if (state.doctor.docCode == '') {
        alert('医生编码不能为空！');
        return;
      }
      if (state.doctor.password == '') {
        alert('密码不能为空！');
        return;
      }

      axios
          .post("api/doctor/getDoctor", state.doctor)
          .then((response) => {
            let data = response.data.data;
            console.log(response.data.data)
            if(response.data.status==200){
              setSessionStorage("doctor", data);
              router.push("/reportList");
            }else{
              alert(账密错误);
            }
          })
          .catch((error) => {
            console.error(error);
          });
    }

    return {
      ...toRefs(state),
      login
    }
  }
}

</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>体检app-医生登录</span>
      </div>
    </template>

    <div class="text item">
      <el-form ref="formRef" :model="doctor" label-width="80px">
        <el-form-item label="医生编码">
          <el-input v-model="doctor.docCode"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="doctor.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="warning" @click="">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>@2024年09月24日</template>
  </el-card>
</template>



<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 400px;
  margin: 0 auto;
  margin-top: 150px;
}
</style>